<template>
  <div class="chart-item row2-right">
    <div class="chart-header">
      <h3>器具来源类别占比</h3>
    </div>
    <div class="chart-content">
      <div ref="sourceChart" class="chart-row2"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'SourceChart',
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.sourceChart
        if (!chartDom) return

        this.chart = echarts.init(chartDom)
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: '10%',
            top: 'center',
            itemGap: 15,
            textStyle: {
              fontSize: 12
            }
          },
          series: [
            {
              name: '器具来源',
              type: 'pie',
              radius: ['20%', '80%'],
              center: ['40%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: [
                { value: 4544, name: '采购获得', itemStyle: { color: '#5470c6' } },
                { value: 3321, name: '自制生产', itemStyle: { color: '#91cc75' } },
                { value: 2341, name: '租赁获得', itemStyle: { color: '#fac858' } },
                { value: 3113, name: '合作伙伴', itemStyle: { color: '#ee6666' } },
                { value: 1231, name: '其他来源', itemStyle: { color: '#73c0de' } }
              ]
            }
          ]
        }

        this.chart.setOption(option)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* SourceChart组件特有样式 */
/* 主要样式已在父组件中统一定义 */
</style>
